<template>
<div>
  <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
      <van-tabbar-item icon="bar-chart-o" to="/kc">课程</van-tabbar-item>
      <van-tabbar-item icon="cart-o" to="/yk">约课</van-tabbar-item>
      <van-tabbar-item icon="cart-o" to="/lx">练习</van-tabbar-item>
      <van-tabbar-item icon="friends-o" to="/wd">我的</van-tabbar-item>
    </van-tabbar>
    <router-view></router-view>
    <div class="youx">
      <van-icon name="envelop-o" />
    </div>
</div>
</template>

<script>
import Vue from 'vue';
import { Tabbar, TabbarItem } from 'vant';

Vue.use(Tabbar);
Vue.use(TabbarItem);
export default {
  // 组件状态值
  data () {
   return {
    active: 0,
   }
  },
  // 生命周期
  mounted() {},
  // 组件方法
  methods: {},
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 过滤器
  filters: {},
  // 自定义指令
  directives: {},
}
</script> 

<style scoped>
.youx{
  width: 60px;
  height: 60px;
  background: #007aff;
  position: fixed;
  bottom: 10%;
  right: 10px;
  text-align: center;
  color: white;
  border-radius: 50%;
  line-height: 60px;
  font-size: 30px;
}
</style>
